<template>
	<div class="box">
		<!-- 头部搜索模块 -->
		<headerSearch 
      :selectObj="selectObject" 
      :isShowAdd="menuFlag" 
      :goSearchFc="searchClick" 
      :buttonList="buttonList"
      @changeSelect="changeSelect"
    />
		<!-- 中间表格模块 -->
    <BaseTable
        :data="cargotableData"
        :columns="cargotableDataColumns"
        :tableHeight="mainHeight"
        :pagination="false"
        :loading="loading"
        :onSelectChange="()=>{}"
        @checkId="selectionChange"
    ></BaseTable>
	</div>
</template>

<script>
import BaseTable from '@/components/BaseTable'
import api from '@/api/yardTally/cargoTransfer'
import publicapi from '@/api/public'
import headerSearch from '@/components/headerSearch'

export default {
  name: 'addCargo', // 票货管理
  components: {
    BaseTable,
    headerSearch
  },
  data() {
    return {
      menuFlag: false, // 是否展示按钮
      // 搜索框显示对象
      selectObject: [
        {
          name: '场地',
          type: 'select',
          modelName: 'storehouseId',
          selectData: [],
          selectLabel: 'storehouseName',
          selectValue: 'storehouseId'
        },
        {
          name: '垛号',
          type: 'select',
          modelName: 'stackPosition',
          selectData: [],
          selectLabel: 'stackPosition',
          selectValue: 'stackPosition'
        },
        {
          name: '件号',
          type: 'select',
          modelName: 'pieceNo',
          selectData: [],
          selectLabel: 'pieceNo',
          selectValue: 'pieceNo'
        }
      ],
      buttonList: [],
      // header的按钮list
      cargotableDataColumns: [
        { type: 'selection' },
        { prop: 'position', label: '垛号' },
        { prop: 'pieceNo', label: '件号' },
        { prop: 'quantityStorage', label: '场存件数' },
        { prop: 'tonStorage', label: '场存重量' },
        { prop: 'volumeStorage', label: '场存体积' }
      ],
      cargotableData: [], // table数据
      loading: false,
      selectData: [],
      queryAll: {
        cargoInfoId: '',
        tally: ''
      },
      totalNum: 0
    }
  },
  created() {
    this.getStackingPosition()
    this.getGround()
  },
  props: {
    height: {
      type: Number
    },
    customerCode: {
      type: String,
      default: ''
    }
  },
  computed: {
    mainHeight: function() {
      return this.height ? this.height : this.$store.state.tableHeight - 40
    },
    tableHeight: function() {
      return this.$store.state.tableHeight - 40
    }
  },
  methods: {
    /**
     * 获取垛位信息
     */
    async getStackingPosition() {
      const res = await api.reqGetStackingPosition(this.queryAll)
      this.cargotableData = res.data.data
    },
    /**
     * 获取场地信息
     */
    async getGround() {
      const res = await api.reqGetGround(this.queryAll)
      this.selectObject[0].selectData = res.data.data
    },
    /**
     * header下拉框切换触发事件
     * @params i:选择的值 val:哪一个下拉框
     */
    changeSelect(i, val) {
      console.log(i, val, 'ddd');
      if (val === 'storehouseId') {
        this.queryAll.storehouseId = i
        api.reqGetStackingNumber(this.queryAll).then(res => {
          this.selectObject[1].selectData = res.data.data
        })
      } else if (val === 'stackPosition') {
        this.queryAll.stackPosition = i
        api.reqGetQuantityNumber(this.queryAll).then(res => {
          this.selectObject[2].selectData = res.data.data
        })
      }
    },
    /**
     * 多选框选中
     */
    selectionChange(val) {
      this.selectData = val
      console.log(val);
    },
    searchClick(searchData) {
      console.log(searchData, 'searchData');
      this.queryAll.startpage = 1
      this.queryAll = Object.assign(this.queryAll, searchData)
      this.getStackingPosition()
    },

    handleSizeChange(val) {
      this.queryAll.pagesize = val
      this.getStackingPosition()
    },
    handleCurrentChange(val) {
      this.queryAll.startpage = val
      this.getStackingPosition()
    }
  }
}
</script>

<style lang="less" scoped>
@import "../component/index.less";
.selectBox {
	justify-content: space-between;
	display: flex;
	background: #ffffff;
	border: 1px solid #e1e4eb;
	border-bottom: 0;
	border-left: none;
	height: 50px;
	position: relative;
	align-items: center;
	padding-left: 14px;
	padding-right: 20px;
}
.input_box {
	display: flex;
}
.page {
	background: #ffffff;
	text-align: right;
	border-radius: 0 0 4px 4px;
	padding: 5px 20px;
}
/deep/.el-tabs--border-card > .el-tabs__content {
	padding: 0 !important;
}
//抽屉底部样式
/deep/ .el-drawer__header {
	margin-bottom: 0;
	padding: 16px;
	border-bottom: 1px solid gainsboro;
}
.demo-drawer__footer {
	text-align: right;
	padding-right: 20px;
	border-top: 1px solid #c8cfde;
	background-color: #f5f7fa;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	line-height: 50px;
}
.box {
	background: #ffffff;
	border: 1px solid #e1e4eb;
	border-radius: 4px 4px 0 0;
	border-top: none;
}
</style>
